<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        background-color: pink;
        width: 200px;
        height: 200px;
    }
</style>
<body>
    <div></div>
    <script>

        var div = document.querySelector('div');
        var starX = 0;
        var starY = 0;
        var x = 0;//获得盒子原来的位置
        var y = 0;
        div.addEventListener('touchstart', function(event) {
            starX = event.touches[0].clientX;
            starY = event.touches[0].clientY;
            x = this.offsetLeft;
            y = this.offsetTop;
        });
        div.addEventListener('touchmove', function(event) {
            //计算手指移动的距离，手指操作之后的坐标减去初始化的坐标   
            var moveX = event.touches[0].clientX - starX;
            var moveY = event.touches[0].clientY - starY;
            //移动我们的盒子，盒子原来的位置，手指移动的距离
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            e.preventDefault();//防止滚动的默认行为
                
        });
            
    </script>

</body>
</html>